<template>
  <div class="leftScreen">
    <div class="entScreen project">
      <!-- <div class="title">全部项目( {{ projectList.length }} )</div>
      <ul>
        <li v-for="(item, index) in projectList" :key="index">
          <div class="name">{{ item.name }}</div>
          <div class="info">
            <div
              class="address"
              @click="activePro(item.latitude, item.longitude)"
            >
              <i class="el-icon-location-outline" style="margin-right: 3px"></i>
              <span>{{
                (item.provinceName ? item.provinceName : "") +
                (item.cityName ? item.cityName : "") +
                (item.countryName ? item.countryName : "") +
                (item.streetName ? item.streetName : "") +
                (item.address ? item.address : "")
              }}</span>
            </div>
            <div class="user">
              <el-avatar :size="25" :src="item.avatar | imgPath">
                <img
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                />
              </el-avatar>
              <div>{{ item.userName }}</div>
            </div>
          </div>
        </li>
      </ul> -->
      <div class="title">
        <img :src="leftIcon" alt="" />
        <span>项目数量</span>
        <img :src="rightIcon" alt="" />
      </div>
      <div class="content">
        {{ projectList.length }}
      </div>
    </div>
    <div class="entScreen deviceFun">
      <div class="title">
        <img :src="leftIcon" alt="" />
        <span>设备运行状态</span>
        <img :src="rightIcon" alt="" />
      </div>
      <div class="content scroll-wrap">
        <div v-for="(item, index) in deviceList" :key="index">
          <div class="word index">{{ index + 1 }}.</div>
          <div class="word">
            <el-tooltip
              effect="dark"
              :content="
                item.projectInfo ? item.projectInfo.screenName : '未挂靠项目'
              "
              placement="top"
            >
              <div class="proName">
                {{
                  item.projectInfo ? item.projectInfo.screenName : "未挂靠项目"
                }}
              </div>
            </el-tooltip>
          </div>
          <div class="word">/</div>
          <div class="word">{{ item.name }}</div>
          <div class="word">/</div>
          <div :class="['word', getColor(item.statusCode)]">
            {{ getState(item.statusCode) }}
          </div>
        </div>
      </div>
    </div>
    <div class="entScreen deviceUse">
      <div class="title">
        <img :src="leftIcon" alt="" />
        <span>焊口数量</span>
        <img :src="rightIcon" alt="" />
      </div>
      <div class="content">
        <PEcharts :option="weldsOption" />
      </div>
    </div>
  </div>
</template>

<script>
import leftIcon from "@/assets/img/leftIcon.png";
import rightIcon from "@/assets/img/rightIcon.png";
import { deviceState, weldsCharts } from "@/api/enterpriserSre";
import PEcharts from "@/components/charts/pEcharts";

export default {
  components: { PEcharts },

  props: {
    projectList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      leftIcon: leftIcon,
      rightIcon: rightIcon,
      deviceList: [],
      weldsOption: {},
    };
  },
  computed: {
    spaceId() {
      return this.$store.getters.entSpaceId;
    },
  },
  mounted() {
    this.deviceState();
    this.weldsCharts();
  },
  methods: {
    deviceState() {
      let params = {
        d: {
          page: {
            p: 1,
            ps: 9999,
          },
          c: [
            {
              key: "entSpaceId",
              value: this.spaceId,
            },
          ],
        },
      };
      deviceState(params).then((res) => {
        this.deviceList = res.result;
      });
    },

    getState(state) {
      switch (state) {
        case "online":
          return "在线";
        case "offline":
          return "离线";
      }
    },
    getColor(state) {
      switch (state) {
        case "online":
          return "online";
        case "offline":
          return "offline";
      }
    },
    weldsCharts() {
      let params = {
        d: {
          c: [
            {
              key: "entSpaceId",
              value: this.spaceId,
            },
          ],
        },
      };
      weldsCharts(params).then((res) => {
        this.weldsOption = this.chartsinit(
          {
            color: ["#34ae91"],
          },
          res.result
        );
      });
    },
    chartsinit(obj, data) {
      let option = {
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: false,
            },
            data: data.xAxis.map((v) => ({
              value: v,
              textStyle: { color: "transparent" },
            })),
          },
        ],
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.7)",
            },
          },
          splitLine: {
            show: false,
            // lineStyle: {
            //   type: "dashed",
            //   color: "rgba(255, 255, 255, 0.7)",
            // },
          },
        },
        tooltip: {
          show: true,
        },
        series: [
          {
            data: data.yAxis,
            type: "bar",
            smooth: true,
          },
        ],
      };
      return Object.assign({}, option, obj);
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  font-size: 14px;
  color: #fff;
}
.leftScreen {
  position: absolute;
  left: 30px;
  top: 80px;
  .project .content {
    height: 100px;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .deviceFun .content {
    height: 350px;
    overflow: auto;
    padding: 0 20px;
    > div {
      display: flex;
      flex-wrap: wrap;
      .word {
        line-height: 30px;
        font-size: 16px;
        color: #b7d2ff;
        margin: 0 5px;
        &.index {
          width: 20px;
        }
        .proName {
          line-height: 30px;
          font-size: 16px;
          color: #b7d2ff;

          width: 120px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &.online {
          color: green;
        }
        &.offline {
          color: gray;
        }
      }
    }
  }
  .deviceFun {
    margin-top: 50px;
  }
  .deviceUse {
    margin-top: 60px;
  }
  .deviceUse .content {
    height: 300px;
  }
}
</style>